<template>
  <div class="exam_container">
    <!-- 整个的考试界面 -->

    <!-- 头，可能是考试的一些信息 -->
    <div class="exam_header"></div>

    <!-- 题目，是考试的主题 -->
    <ol class="topics">
      <li class="topic" v-for="(e, index) in exercises" :key="index">
        <!-- 如果是单选 -->
        <single-choice
          v-show="e.type === 'SC'"
          :topic="e.topic"
          :isNeedShow="isNeedShow"
          :isCanShow="isCanShow"
        ></single-choice>

        <!-- 如果是多选 -->
        <multiple-choice
          v-show="e.type === 'MC'"
          :topic="e.topic"
        ></multiple-choice>
        <!-- 如果是判断 -->
        <true-or-false
          v-show="e.type === 'TOF'"
          :topic="e.topic"
        ></true-or-false>
        <!-- 如果是填空 -->
        <blank-question
          v-show="e.type === 'BQ'"
          :topic="e.topic"
        ></blank-question>
        <!-- 如果是问答 -->
        <essay-question
          v-show="e.type === 'EQ'"
          :topic="e.topic"
        ></essay-question>

        <!-- index !=== 1 -->
        <el-divider v-show="index !== exercises.length - 1"></el-divider>
      </li>
    </ol>

    <!-- 功能条，包括交卷功能 -->
    <div class="footer_tools">
      <el-button type="primary" round>交卷</el-button>
    </div>
  </div>
</template>

<script>
import SingleChoice from "@/components/question_types/SingleChoice";
import MultipleChoice from "@/components/question_types/MultipleChoice";
import TrueOrFalse from "@/components/question_types/TrueOrFalse";
import BlankQuestion from "@/components/question_types/BlankQuestion";
import EssayQuestion from "@/components/question_types/EssayQuestion";

/**
 * 每一个习题有其对应的类型，根据不同的类型，应该选择不同的属性
 * 类型包括：单选（Single  Choice），多选（Multiple Choice），判断（True Or False），填空(blank questions)，问答(essay question)...，目前只考虑单选题
 * 单选：题干，选项，正确答案，选择的答案，解析
 *
 */
export default {
  name: "Examination",
  components: {
    EssayQuestion,
    BlankQuestion,
    TrueOrFalse,
    MultipleChoice,
    SingleChoice,
  },
  data() {
    return {
      exercises: [
        // 单选题的格式
        {
          type: "SC",
          topic: {
            title: "【单选题】1+1=?",
            opts: ["1", "2", "3", "4"],
            done: false,
          },
        },
        // 多选题的格式
        // {
        //   type: "MC",
        //   topic: {
        //     order: 2,
        //     title: "爱吃什么",
        //     opts: [
        //       {
        //         order: "A",
        //         content: "香草",
        //         isSelected: false,
        //       },
        //       {
        //         order: "B",
        //         content: "冰淇淋",
        //         isSelected: false,
        //       },
        //     ],
        //     answer: "A",
        //     choice: [],
        //     explanation: "",
        //     isFinish: false,
        //   },
        // },
      ],
      //  用两个来控制，需不需要展示，以及是否满足了展示条件
      isNeedShow: false,
      isCanShow: false,
      //答案收集器
      answerSheet: {},
    };
  },
  beforeMount() {
    const eid = this.$route.query.eid;
    // 进行网络请求获取到data里面的两个数据
    console.log("正在读取试卷...");
    console.log("读取完成...");
  },
};
</script>

<style lang='less' scoped>
.exam_container {
  width: 70%;
  margin-left: calc(30% * 0.5);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;
  .exam_header {
    width: 100%;
    height: 200px;
    background-color: #e5e9f2;
    margin: 20px;
    border-radius: 15px;
  }
  .topics {
    width: 100%;
    height: auto;
    background-color: #e5e9f2;
    margin-bottom: 20px;
    border-radius: 15px;
  }
  .footer_tools {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.selected {
  color: #1076cb;
}
</style>